import React from "react";
import {Checkbox, Col, Row, Tooltip} from "antd";
import {
    buildColumn,
    COL_OP,
    LdhButton,
    LdhFormItem,
    LdhFrom,
    LdhInputNumber,
    LdhListSelect,
    LdhPage,
    LdhTable
} from "@biz/Components";


import "./style.less";
import Action from "./Action";

const prefix = "jstack-page";
const renderWithClassName=(v,vo)=>{return <div className={v}>{v}</div>}

const columns = [
    buildColumn("序号", "no", 60, {
        render(v, vo) {
            return <Tooltip title={<div>{vo.content}</div>} placement={"right"}>{v}</Tooltip>
        }
    }),
    buildColumn("Thread", "name", undefined,{onFilter: (v, vo) => vo.name.indexOf(v) == 0}),
    buildColumn("State", "state", 110, {render:renderWithClassName}),
    buildColumn("Sub State", "subState", 120, {render:renderWithClassName}),
    COL_OP
]
export default class JstackPage extends React.Component {
    constructor() {
        super();
        this.state = {
            file: "",
            list: []
        }
        this.action = new Action(this);
    }

    componentDidMount() {
        columns[columns.length - 1].render = this.renderRowAction.bind(this);
    }


    renderRowAction(v, vo, index) {
        return <div>

        </div>
    }


    handleChooseFile() {
        this.action.chooseFile((data) => {
            let {file, list} = data;
            this.setState({file, list});
        })
    }


    renderTop() {
        let {isStart, initValues, settings = []} = this.state;

        return <LdhFrom ref={this.formRef} labelWidth="80px" initialValues={initValues}>
            <Row>
                <Col flex="250px">
                    <LdhFormItem name="delta" label="间隔(秒)" required>
                        <LdhInputNumber className="w-170"/>
                    </LdhFormItem>
                    <LdhFormItem name="setting" label="邮箱配置" required>
                        <LdhListSelect list={settings} className="w-170"/>
                    </LdhFormItem>
                    <LdhFormItem name="cb_send" isCheckbox>
                        <Checkbox>已发送邮件</Checkbox>
                    </LdhFormItem>
                    <LdhFormItem name="cb_delete" isCheckbox>
                        <Checkbox>已删除邮件</Checkbox>
                    </LdhFormItem>
                    <LdhFormItem name="cb_ignore" isCheckbox>
                        <Checkbox>忽略当天之前的邮件</Checkbox>
                    </LdhFormItem>
                </Col>
                <Col flex="auto">
                    {isStart
                        ? <LdhButton size="large" type="primary" danger
                                     onClick={this.handleStop.bind(this)}>停止</LdhButton>
                        : <LdhButton size="large" type="primary" onClick={this.handleStart.bind(this)}>启动</LdhButton>
                    }

                </Col>
            </Row>
        </LdhFrom>
    }


    render() {
        let {file, list = []} = this.state;

        return <LdhPage className={prefix}>
            {file}
            <LdhButton onClick={this.handleChooseFile.bind(this)}>选择文件</LdhButton>
            <LdhTable dataSource={list} columns={columns} rowKey="id" sortFields={["no", "name", "state", "subState"]}
                      expandable={{
                          expandedRowRender: (vo) => (
                              <pre className="content-detail">{vo.content}</pre>
                             /* <p dangerouslySetInnerHTML={{__html:vo.content.replace("\n","<br/>")}}></p>*/
                          )
                      }}
            />
        </LdhPage>
    }
}
